<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>JavaScript Constructor Lab3</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
			
			#smallDog {
				color: blue;
			}
			
			#bigDog {
				color: red;
			}
			
			label {
				cursor: pointer;
			}
		</style>
		<!-- embed jquery by google，藉由google嵌入jquery 1.4.4 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.4.4" );
		</script>
		<!-- 嵌入外部javascript library: Base.js -->
		<script type="text/javascript" src="./jsLib/Base.js"></script>
		<script type="text/javascript">
			
			// 建構子函式
			var Musician = function( name, age, sex ) {
				
				if( name == "" || name == null || typeof( name ) == "undefined" ) {
					throw new Error( "Wrong argument: \"name\"" );
				}
				
				if( age == "" || age == null || typeof( age ) == "undefined" ) {
					throw new Error( "Wrong argument: \"age\"" );
				}
				
				if( sex != "male" && sex != "female" ) {
					throw new Error( "Wrong argument: \"sex\"" );
				}
				
				this.basicInfo = {
					infoName: name,
					infoAge: age,
					infoSex: sex
				};
			};
			
			// 宣告Animal類別，繼承Base類別
			var Animal = Base.extend({
				
				// 建構子
				constructor: function() {
					$( "#content" ).append(
						"<p>" + 
							"<strong id='animal'>" + "I'm a wild animal..." + "</strong>" + 
						"</p>"
					);
				},
				
				// 宣告方法
				method: function() {
					$( "strong" ).html( "I'm a animl!!!" );
				},
				
				move: function() {
					alert( "animal can move... " );
				}
			});
			
			// 宣告Dog類別，繼承Animal類別
			var Dog = Animal.extend({
				
				constructor: function() {
					$( "#animal" ).append( "<i id='smallDog'>I'm a small dog!</i>" );
				},
				method: function() {
					$( "#smallDog" ).html( "&nbsp;<i id='bigDog'>I'm a big dog now!</i>" );
				}
			});
			
			// 宣告Cat類別，繼承Animal類別
			var Cat = Animal.extend({
				weight: 0.0, // free variable
				
				// 注意，closure!
				constructor: function( catWeight ) {
					weight = catWeight;
				},
				move: function() {
					alert( "cat can move pretty quietly... " );
				},
				getWeight: function() {
					return weight;
				}
			});
		
			$( document ).ready( function() {
				
				var bassplayer = new Musician( "Charlie Haden", "50", "male" );
				$( "#header" ).append(
					"<p>" + 
						"Musician Name is " + bassplayer.basicInfo.infoName + "<br />" +
						"Musician Age is " + bassplayer.basicInfo.infoAge + "<br />" +
						"Musician Sex is " + bassplayer.basicInfo.infoSex + 
					"</p>"
				);
				
				var animal = new Animal();  // 執行Animal的建構子
				animal.method(); // 執行Animal的方法
				
				var dog = new Dog();  // 執行Dog的建構子
				dog.method();  // 執行Dog的方法
				
				var cat = new Cat( 7.4 );
				
				$( "*[id='animalMove']" ).click( animal.move );
				$( "button:last" ).click( dog.move );
				$( "label:last" ).click( cat.move );
				
			});
		</script>
		
	</head>
	
	<body>
		<div title="Musician Title" id="header">Musician Title</div>
		<div title="Animal Panel" id="content">Wild Animal</div>
		<button id="animalMove">animal move</button>
		<button id="dogMove">dog move</button>
		<label value="cat move">cat move</label>
	</body>
</html>